<template>
  <div class="index_page">
    <y-header />
    <div class="bg-wrap2" style="min-height: calc(100vh - 150px );">
      <y-choose ref="choose" :search-key="obj.mingcheng" />
      <div class="list-ctn" style="margin-bottom: 20px;">
        <div v-if="pageObj.list.length > 0" class="container">
          <ul class="course_tab clearfix" style="font-size: 16px">
            <li :class="{on: activeName == 'gonggao'}" @click="handleClick('gonggao')"><a href="javascript:">通知公告</a></li>
            <li :class="{on: activeName == 'zixun'}" @click="handleClick('zixun')"><a href="javascript:">新闻资讯</a></li>
          </ul>
          <div>
            <ul id="elList" class="info-list">
              <li v-for="(obj, idx) in pageObj.list" :key="idx" :obj="obj" :idx="idx">
                <a :href="obj.id" target="_blank" :title="obj.mingcheng" class="link">
                  <span class="news-date" v-html="obj.mingcheng" />
                </a>
                <p class="info-date">
                  <span>{{ formatDat(obj) }}</span>
                  <span v-if="obj.zhuanzaiwangzhi && obj.zhuanzaiwangzhi.length > 0">
                    <a :href="obj.zhuanzaiwangzhi" target="_blank">转载</a>
                  </span>
                </p>
              </li>
            </ul>
          </div>
          <d-page :page="pageObj" @btnClick="getPage" />
        </div>
        <el-empty v-else description="空空如也" />
      </div>
    </div>
    <!-- <bottom /> -->
    <y-tap />
  </div>
</template>
<script>
import YHeader from '@/components/common/Header'
import YChoose from '@/components/common/PostChoose.vue'
import DPage from '@/components/common/Page'
import YTap from '@/components/common/Top'
import { postList } from '~/api/course.js'
import { postChange } from '~/utils/commonfun.js'
import '@/assets/css/index.css'
import { substr } from '@/utils/utils'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    YHeader,
    YChoose,
    DPage,
    YTap
  },
  async asyncData(context) {
    const dataObj = {}
    dataObj.websiteInfo = context.store.state.websiteInfo
    const leixing = context.query.leixing || ''
    const mingcheng = context.query.mingcheng || ''
    const initSearchObj = {
      pageCurrent: 1,
      pageSize: 20,
      leixing,
      mingcheng
    }
    console.log('initSearchObj', initSearchObj)
    try {
      const allData = await Promise.all([postList(initSearchObj)])
      // 全景分页
      dataObj.pageObj = allData[0]
      // console.log('pageObj', dataObj.pageObj)
      dataObj.obj = {
        pageCurrent: initSearchObj.pageCurrent,
        pageSize: initSearchObj.pageSize
      }
      return dataObj
    } catch (e) {
      context.error({ message: 'Data not found', statusCode: 404 })
    }
  },
  data() {
    return {
      activeName: ''
      // categoryId: '', // 当前分类ID
    }
  },
  head() {
    return {
      title: '新闻公告-' + this.$store.state.websiteInfo.websiteName,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.$store.state.websiteInfo.websiteKeyword
        },
        {
          hid: 'description',
          name: 'description',
          content: this.$store.state.websiteInfo.websiteDesc
        }
      ]
    }
  },
  watch: {
    '$route'() {
      postChange(this)
      this.getPost()
    }
  },
  mounted() {
    this.activeName = this.$route.query.leixing
  },
  created() {
    // const path = this.$route.path // 先获取路由路径
    // this.$router.push(path)
    // courseChange(this)
    // this.getPost()
  },
  methods: {
    getPost() {
      if (this.obj.mingcheng === '') {
        delete this.obj.mingcheng
      }
      // this.$nuxt.$loading.start()
      postList(this.obj).then(res => {
        // this.$nuxt.$loading.finish()
        if (res) {
          this.pageObj = res
        } else {
          this.pageObj = {}
        }
      }).catch(() => {
        // this.$nuxt.$loading.finish()
        this.$msgBox({
          content: '数据加载失败，请稍后重试',
          isShowCancelBtn: false
        })
      })
    },
    getPage(int) {
      // window.scrollTo(0, 0)
      this.obj.pageCurrent = int
      this.getPost()
    },
    handleClick(newActiveName) {
      this.activeName = newActiveName
      this.$route.query.leixing = this.activeName
      this.$refs.choose.goList()
    },
    sub(str) {
      return substr(str, 200)
    },
    formatDat(obj) {
      const d = obj.gmtCreate
      if (d && d.length >= 10) {
        return d.substring(0, 10)
      }
      return d
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.course_tab {
  // padding-left: 10px;
  // background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #E4E7ED;

  li {
    float: left;
    height: 36px;
    line-height: 26px;
    margin-right: 30px;
    font-size: 16px;
    color: #3333;

    &.on {
      border-bottom: 2px solid #4269c9;

      a {
        color: #4269c9;
      }
    }

    a {
      color: #000;
      font-size: 14px;
      /* font-weight: 700; */

      &:hover {
        text-decoration: none;
        color: #666666;
      }
    }
  }
}

.info-list > li{
  border-bottom: 1px solid #f6f6f6;
  padding: 15px 0;
}

.info-list > li .link{
  display: inline-block;
  max-width: 100%;
  font-size: 16px;
  color: #333;
  /* font-weight: bold; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-list > li a:hover{
  color: #4269c9;
  text-decoration: underline;
}

.info-list > li .info-brief{
  font-size: 15px;
  color: #333;
  line-height: 1.8em;
  margin: 5px 0;
}

.info-list > li .info-date{
  color: #888;
  margin-top: 10px;
}

.info-list > li .info-date > span{
  margin-right: 30px;
}

.info-list > li .info-date > a{
  font-size: 14px;
  color: #888;
}

.news-date {
  font-size: 14px;
}
</style>
